<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>IFE JavaScript Task 01</title>
</head>

<body>
    <h3>污染城市列表</h3>
    <ul id="aqi-list">
        <!--   
    <li>第一名：福州（样例），10</li>
  	<li>第二名：福州（样例），10</li> -->
    </ul>

    <script type="text/javascript">
        var aqiData = [
            ["北京", 90],
            ["上海", 50],
            ["福州", 10],
            ["广州", 50],
            ["成都", 89],
            ["西安", 100],
        ];

        (function() {
            /*
                在注释下方编写代码
                遍历读取aqiData中各个城市的数据
                将空气质量指数大于60的城市
                显示到aqi-list的列表中
                列表有排序要把数组排序
                */

            // 下面的代码用于排序，a[1] - b[1] 是提供的比较函数，该函数要比较两个值，
            // 然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：
            // 若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
            // 若 a 等于 b，则返回 0。
            // 若 a 大于 b，则返回一个大于 0 的值。
            let outputData = aqiData
                .filter(function(value) {
                    return value[1] > 60;
                })
                .sort(function(a, b) {
                    return a[1] - b[1]; //从小到大排序
                });

            var pos = "一二三四五六七";
            var outputHTML = "";
            outputData.forEach(function(value, index) {
                outputHTML +=
                    "<li>第" +
                    pos.charAt(index) +
                    "名：" +
                    value[0] +
                    "，" +
                    value[1] +
                    "</li>";
            });
            // 输出
            document.getElementById("aqi-list").innerHTML = outputHTML;
        })();
    </script>
</body>

</html>